/*!
 * Copyright 2019 WeBank
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

@import '@/common/style/variables.scss';
.workflow-item {
    overflow: hidden;
}
.content-item {
    margin: 2px 0px 25px 0px;
    .project-list-ul {
        padding: 10px 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    .project-item {
        height: 142px;
        margin-right: 25px;
        margin-bottom: 25px;
        background: #fff;
        max-width: 430px;
        border-radius: 2px;
        border: 1px solid #dcdee2;
        padding: 20px;
        cursor: pointer;
        &:hover {
          box-shadow: 0 2px 12px 0 $shadow-color;
        }
        .project-main {
          height: 100%;
          .top-bar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .project-title {
              flex: 1;
              font-size: $font-size-large;
              font-weight: 600;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-family: PingFangSC-Medium;
              color: $text-title-color;
              letter-spacing: 0;
            }
            .menu-bar {
              position: relative;
              flex-basis: 40px;
              margin-right: 8px;
              .menu-list {
                display: none;
                position: absolute;
                bottom: 25px;
                left: -8px;
                border-radius: 4px;
                padding: 5px 0;
                box-shadow: 0 1px 6px rgba(0,0,0,.2);
                z-index: 999;
                background-color: #fff;
                cursor: pointer;
                .list-item {
                  width: 60px;
                  padding: 5px 8px;
                  text-align: center;
                  &:hover {
                    background-color: #f3f3f3;
                  }
                }
              }
              &:hover {
                .menu-list {
                  display: inline;
                }
              }
            }
          }
          .mid-bar {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: $font-size-14;
            color: rgba(0,0,0,0.5);
            margin: 10px 0;
          }
          .bottom-bar {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            .tag-item {
              color: $text-desc-color;
              padding: 2px 10px;
              margin-right: 10px;
              border-radius: 14px;
              background-color:#F3F3F3;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-family: PingFangSC-Regular;
            }
          }
        }
        .process-bar {
          position: absolute;
          left: 0;
          bottom: -20px;
        }
    }
    .project-header {
      text-align: center;
      font-size: $font-size-large;
      line-height: 102px;
      border: 1px dashed  #dcdee2;
      background: #F8F9FC;
      .add-icon {
        margin-top: -2px;
        margin-right: 5px;
      }
    }
}

.item-header {
    font-size: $font-size-base;
    margin: 10px 25px;
    font-weight: bold;
    padding-left: 5px;
    border-left: 3px solid $primary-color;
}

.page-bar {
    padding: 0 30px;
    margin-bottom: 30px;
}

.no-data {
    text-align: center;
    padding: 20px;
}

.queue-manager-status {
    position: $relative;
    width: 100%;
    height: 10px;
    display: flex;
    align-items: center;
    font-size: 10px;
    border-radius: 10px;
    background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, rgb(88, 175, 251) 0.8rem, rgb(88, 175, 251) 1.6rem, transparent 1.6rem, transparent 2.4rem, rgb(88, 175, 251) 2.4rem);
    background-size: 21px 27px;
    box-shadow: 1px 1px 5px rgba(88, 175, 251, .6);
    -webkit-animation: process 800ms infinite linear;
    animation: process 800ms infinite linear;
    background-color: $background-color-base;
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: 10px;
        background-image: linear-gradient(to bottom, rgba(88, 175, 251, .4), rgba(88, 175, 251, .4) 15%, transparent 60%, rgba(88, 175, 251, .4));
    }
    .queue-manager-status-busy {
        position: $absolute;
        left: 0;
        background: $success-color;
        height: 100%;
        border-radius: 10px;
        z-index: 1;
    }
    .queue-manager-status-idle {
        background: $success-color;
        height: 100%;
        border-radius: 10px;
        position: $absolute;
        z-index: 0;
    }
    .queue-manager-status-label {
        position: $absolute;
        right: 6px;
        color: $tooltip-color;
    }
}


/* 动画 */

@-webkit-keyframes process {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 0;
    }
}

@keyframes process {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 0;
    }
}
